<template>


  <div
    style="background-color: #409EFF;height: 30px;line-height: 30px;text-align: left;font-size: 15px;font-weight: bold;color: white;border-radius: 4px; padding-left: 10px;display: flex;justify-items: center;align-items: center;margin-bottom: 8px;">
    <div style="padding-top: 5px;margin-right: 5px;">
      <el-icon :size="16">
        <AnalysisOutlined/>
      </el-icon>
    </div>
    <div>
      报表分类
    </div>
  </div>
  <el-tree node-key="id" default-expand-all :data="trees" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  <!-- 编辑弹窗 -->
  <type-edit v-model="showEdit" :data="current" @done="reload"/>
</template>
<script setup>
import {ref} from 'vue';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  DownloadOutlined,
  HomeOutlined,
  AnalysisOutlined
} from '@/components/icons';
import {ElMessageBox} from 'element-plus';
import {EleMessage} from 'ele-admin-plus';
import {listTypes, removeTypes} from '@/api/manage/jimu/reportType';
import TypeEdit from "@/views/manage/jimu/reportType/components/type-edit.vue";
import {handleTree} from '@/utils/linyang.js'

const trees = ref([]);
const defaultProps = {
  children: 'children',
  label: 'title',
}

const emit = defineEmits(['clickNode']);

/** 当前编辑数据 */
const current = ref(null);

const handleNodeClick = (data) => {
  current.value = data;
  emit("clickNode", data);
}


/** 是否显示编辑弹窗 */
const showEdit = ref(false);

/** 打开编辑弹窗 */
const openEdit = () => {
  //current.value = row ?? null;
  showEdit.value = true;
};


const selectList = () => {
  listTypes().then(res => {
    if (res && res.length > 0) {
      trees.value = handleTree(res);
    }
  });
}

selectList();

/** 表格数据源 */
// const datasource = async ({pages, where}) => {
//   let list = [];
//   await listTypes().then(res => {
//     list = res;
//   });
//   console.log(list);
//   return list;
// };


/** 搜索 */
const reload = (where) => {
  selectList();
};

/** 批量删除 */
const remove = (row) => {
  const rows = row == null ? selections.value : [row];
  if (!rows.length) {
    EleMessage.error({message: '请至少选择一条数据', plain: true});
    return;
  }
  ElMessageBox.confirm(
    `是否确认删除标题为"${rows.map((d) => d.title).join()}"的数据项?`,
    '系统提示',
    {type: 'warning', draggable: true}
  )
    .then(() => {
      const loading = EleMessage.loading({
        message: '请求中..',
        plain: true
      });
      removeTypes(rows.map((d) => d.id))
        .then(() => {
          loading.close();
          EleMessage.success({message: '删除成功', plain: true});
          reload();
        })
        .catch((e) => {
          loading.close();
          EleMessage.error({message: e.message, plain: true});
        });
    })
    .catch(() => {
    });
};

</script>
